<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 12</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>
<script>
  // event, $event                                  提升滚动性能
  // 事件修饰符：stop, prevent, capture, self, once, passive
  // 按键修饰符：enter, tab, delete, esc, up, down, left, right
  // 鼠标修饰符：left, right, middle
  // 精确修饰符：exact
  const app = Vue.createApp({
    data() {
      return {
        counter: 0
      }
    },
    methods: {
      handleDivClick() {
        alert('div click')
      },
      handleBtnClick(event) {
        console.log(event.target);
        this.counter += 1
      },
      handleKeyDown(){
        console.log('keydown');
      },
      handleMouseDown(){
        console.log('mouse click');
      },
    },
    /*  template: `
       <div>
         <div @click.self="handleDivClick">
           {{counter}}
           <button @click="handleBtnClick">button</button>
         </div>
       </div>
     ` */
    //  template: `<input @keydown.enter="handleKeyDown"/>`
    // template: `<div @click.right="handleMouseDown">123</div>`
    template: `<div @click.ctrl.exact="handleMouseDown">123</div>`
  });

  const vm = app.mount('#root');
</script>

</html>